<template>
  <div class>
    <div class="mask" @click="close"></div>
    <div class="paymodal codemodal">
      <div class="modal_head">
        <span class="fl">收银台</span>
        <a href="javascript:" class="close iconfont" @click="close">&#xe616;</a>
      </div>
      <div class="modal_body payrun h180" v-if="payStep === 2">
        <div class="icon iconfont c_green minIcon">
          &#xe69f;
          <span class="c_333">订单支付成功!</span>
        </div>
        <!-- <div class="tip">支付成功</div> -->
        <div class="center mgt20">
          <a
            v-if="data.courseCategory == 1"
            :href="clientData.mainUrl + '/view/'+data.courseId"
            class="solid_btn"
          >立即学习</a>
          <a
            v-else-if="data.courseCategory == 2"
            :href="clientData.mainUrl + '/live/detail/'+data.courseId"
            class="solid_btn"
          >立即学习</a>
          <a
            v-else-if="data.courseCategory == 3"
            :href="clientData.mainUrl + '/live/bunch/'+data.courseId"
            class="solid_btn"
          >立即学习</a>
          <a class="solid_btn" v-else href="javascript:" @click="reload">确定</a>
        </div>
        <div class="ewm_img" v-if="webInfo && webInfo.weixinXcx">
          <img :src="webInfo.weixinXcx" alt />
          <p class="mgt10">微信扫码关注小程序</p>
          <p>学习更便捷</p>
        </div>
      </div>
      <div class="modal_body payrun" v-else-if="payStep === 3">
        <div class="icon iconfont c_red">&#xe68c;</div>
        <div class="tip">支付失败</div>
        <div class="center">
          <button class="solid_btn" @click="resetPay">重新支付</button>
        </div>
      </div>
      <div class="modal_body" v-else>
        <div class="pay_type">
          <input type="radio" id="payType2" name="payType" value="2" v-model="payType" />
          <label for="payType2" class="pay pay_ali" @click="changePay(2)"></label>
          <input type="radio" id="payType1" name="payType" value="1" v-model="payType" />
          <label for="payType1" class="pay pay_weixin" @click="changePay(1)"></label>
        </div>
        <div class="tip" v-if="payType === 2">支付宝支付 {{data.pricePaid}}元</div>
        <div class="tip" v-else>微信支付 {{data.pricePaid}}元</div>
        <div class="code">
          <canvas id="canvas"></canvas>
          <div class="create_tip" v-if="load">正在生成...</div>
        </div>
        <p class="tip2" v-if="payType === 2">
          请使用支付宝扫描
          <br />二维码以完成订单
        </p>
        <p class="tip2" v-else>
          请使用微信扫描
          <br />二维码以完成订单
        </p>
      </div>
    </div>
    <div id="alipayForm" v-html="alipayForm"></div>
  </div>
</template>
<script>
import { continuePay, orderInfo } from "~/api/account/course.js";
import QRCode from "qrcode";
export default {
  props: {
    data: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      payStep: 1,
      payType: 1,
      load: true,
      alipayForm: ""
    };
  },
  methods: {
    reload() {
      window.location.reload();
    },
    close(event) {
      this.$emit("hidefun", event);
    },
    getOrder(pt) {
      this.load = true;
      console.log({
        orderNo: this.data.orderNo,
        payType: pt
      });
      continuePay({
        orderNo: this.data.orderNo,
        payType: pt
      })
        .then(res => {
          console.log(res);
          let result = res.data;
          if (result.code === 200) {
            this.payType = result.data.payType;
            console.log("payType:" + this.payType);
            if (this.payType == "2") {
              console.log("hello");
              console.log("支付宝支付:" + result.data.payMessage);
              this.alipayForm = result.data.payMessage;
              let alipayFormDiv = document.getElementById("alipayForm");
              let script = document.createElement("script");
              script.innerHTML = "document.forms[0].submit();";
              setTimeout(function() {
                alipayFormDiv.append(script);
              }, 10);

              return;
            }
            this.qrcode(result.data.payMessage);
            this.getOrderInfo(result.data.orderNo);
          } else {
            if (result.code >= 300 && result.code < 400) {
              this.$msgBox({
                content: "登录超时，请重新登陆",
                isShowCancelBtn: false
              })
                .then(() => {
                  this.$store.dispatch("REDIRECT_LOGIN", result.code);
                })
                .catch(() => {
                  this.$store.dispatch("REDIRECT_LOGIN", result.code);
                });
            } else {
              this.$msgBox({
                content: result.msg,
                isShowCancelBtn: false
              })
                .then(() => {
                  this.$emit("hidefun", event);
                })
                .catch(() => {});
            }
          }
        })
        .catch(msg => {
          this.getOrder(this.data.payType);
        });
    },
    resetPay() {
      this.payStep = 1;
      this.getOrder(this.payType);
    },
    qrcode(url) {
      let that = this;
      QRCode.toCanvas(
        document.getElementById("canvas"),
        url,
        {
          width: 180,
          height: 180
        },
        function(error) {
          if (error) console.error(error);
          that.load = false;
        }
      );
    },
    changePay(int) {
      console.log(int);
      this.getOrder(int);
    },
    getOrderInfo(no) {
      let that = this;
      orderInfo({ orderNo: no }).then(res => {
        // console.log(res)
        let result = res.data;
        if (result.data.orderStatus === 1) {
          setTimeout(function() {
            that.getOrderInfo(no);
          }, 1000);
        } else if (result.data.orderStatus === 2) {
          that.payStep = 2;
        } else {
          that.payStep = 3;
        }
      });
    }
  },
  mounted() {
    console.log(this.data);
    this.payType = parseInt(this.data.payType);
    this.getOrder(this.data.payType);
  }
};
</script>
<style lang="scss" scoped>
.h180 {
  max-height: 370px;
  min-height: 180px;
}
.paymodal {
  position: fixed;
  left: 50%;
  top: 10%;
  z-index: 999;
  width: 480px;
  margin-left: -240px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  .modal_head {
    line-height: 46px;
    background-color: #f9f9f9;
    text-align: right;
    padding: 0 20px;
    .close {
      font-size: 14px;
    }
  }
  .code {
    position: relative;
    .create_tip {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      line-height: 30px;
      background-color: rgba(255, 255, 255, 0.7);
      text-align: center;
    }
  }
  .modal_foot {
    border-top: 1px solid #e7e7eb;
    padding: 20px;
    text-align: center;
  }
  .table {
    width: 100%;
  }
  th {
    line-height: 36px;
    background-color: #f8f8f8;
  }
  td {
    vertical-align: middle;
    padding: 20px;
  }
  .name {
    width: 140px;
    padding-left: 12px;
    font-size: 16px;
  }
  .img {
    display: inline-block;
    width: 120px;
    padding: 0;
  }
  .name {
    display: inline-block;
    vertical-align: top;
  }
  .tabs {
    height: 48px;
    .tab {
      float: left;
      line-height: 46px;
      text-align: center;
      font-size: 16px;
      width: 50%;
    }
    span {
      cursor: default;
      display: inline-block;
      line-height: 46px;
    }
    .on {
      color: #ee7e00;
      span {
        border-bottom: 2px solid #ee7e00;
      }
    }
  }
  .remark {
    padding: 20px;
    overflow: hidden;
    font-size: 14px;
    border-top: 1px solid #f1f1f1;
    input {
      text-indent: 0.5em;
      height: 22px;
      width: 350px;
      border: none;
    }
  }
  .pay_type {
    padding: 12px 20px;
    overflow: hidden;
    border-bottom: 1px solid #f1f1f1;
    input {
      display: none;
      &:checked + .pay {
        border-color: #ec7f00;
      }
    }
  }
  .pay {
    width: 218px;
    height: 50px;
    border: 1px solid #fff;
    float: left;
    background-repeat: no-repeat;
    background-position: center center;
    &.pay_ali {
      background-image: url();
    }
    &.pay_weixin {
      background-image: url();
    }
  }
}
.codemodal {
  .tip {
    margin: 20px auto 0;
    text-align: center;
    font-size: 16px;
  }
  .code {
    width: 180px;
    height: 180px;
    border: 1px solid #ddd;
    margin: 20px auto;
  }
  .tip2 {
    margin: 0 auto;
    width: 200px;
    padding: 13px 0 13px 70px;
    height: 60px;
    margin-bottom: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    background: url()
      no-repeat 20px center #445f85;
  }
  .tip_panel {
    margin-top: 20px;
    padding: 20px;
    line-height: 20px;
    border-top: 1px solid #f1f1f1;
  }
}
.payrun {
  .icon {
    font-size: 80px;
    width: 80px;
    margin: 30px auto 0;
    text-align: center;
    &.minIcon {
      font-size: 26px;
      width: 160px;
      span {
        position: relative;
        top: -5px;
        font-size: 14px;
        padding-left: 6px;
      }
    }
  }
  .tip {
    font-size: 16px;
    text-align: center;
    padding-bottom: 20px;
  }
  .c_green {
    color: #05d005;
  }
  .ewm_img {
    width: 130px;
    display: block;
    margin: 20px auto 0;
    text-align: center;
    img {
      width: 130px;
      height: 130px;
    }
    p {
      line-height: 20px;
    }
  }
}
</style>
